<template>
  <div id="mapsq" class="mapsq"></div>
</template>

<script>
// import MapLoader from '@/assets/js/AMap.js'

export default {
  name: 'MapSq',
  props: {
    mapData: {
      type: Object,
      default: null
    },
    mappath: {
      type: Array,
      default: null
    },
    currentId: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      showMap: false,
      curPopup: {},
      hidePopup: true
    }
  },
  components: {},
  mounted () {
    const that = this
    that.drawMap()
  },
  computed: {},
  watch: {
    'mapData.list': {
      handler (newV, oldV) {
        const that = this
        if (that.$route.query.deviceType === 'tv') {
          let hasPopup = false
          newV.map(item => {
            item.markers.map(arr => {
              console.log('arr.showdialog', arr.showdialog)
              if (arr.showdialog === 1) {
                const { posr, position } = that.getPopupPosition(arr.lat, arr.lng)
                const popupConfig = {
                  brief: arr.brief,
                  pic: arr.pic,
                  error: arr.error,
                  jumpId: arr.jumpId,
                  jump: arr.jump,
                  show: true,
                  position,
                  posr
                }
                hasPopup = true
                that.$emit('showPopup', popupConfig)
              }
            })
          })
          console.log('hasPopup', hasPopup)
          if (!hasPopup) {
            that.$emit('hidePopup')
          }
        }
      },
      deep: true
    }
  },
  methods: {
    drawMap () {
      const that = this
      const AMap = window.AMap
      // console.log('mapData', that.mapData)
      that.map = new AMap.Map('mapsq', {
        center: [that.mapData.center.lat, that.mapData.center.lng],
        mapStyle: 'amap://styles/caa8900448306f4fa1c7533ea7ca5a46', // 设置地图的显示样式
        pitch: 70, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D', // 地图模式
        zoom: that.mapData.center.zoom,
        zoomEnable: false,
        dragEnable: false
      })

      const path = that.mappath
      const polyline = new AMap.Polygon({
        path: path,
        isOutline: true,
        // outlineColor: '#ffeeff',
        // borderWeight: 3,
        fillColor: '#007df0', // 填充颜色
        fillOpacity: 0.15, // 填充透明度
        strokeColor: '#007df0',
        strokeOpacity: 0.8,
        strokeWeight: 6,
        // 折线样式还支持 'dashed'
        strokeStyle: 'solid',
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50
      })

      that.addMakers()
      that.map.on('complete', function () {
        // console.log('complete')
        that.showMap = true
      })

      that.map.add(polyline)
    },
    markerChange (id) {
      const that = this
      // that.map.clearMap()
      // console.log('that.markers', that.markers)
      that.map.remove(that.markers)
      // console.log(id)
      // that.drawMap()
      that.addMakers(id)
    },
    getPopupPosition (lat, lng) {
      const that = this
      const AMap = window.AMap
      const lnglat = new AMap.LngLat(lat, lng)
      const pixel = that.map.lnglatTocontainer(lnglat)
      const dot = pixel.round()
      let position = { left: (dot.x + 10) + 'px', top: (dot.y - 75) + 'px' }
      let posr = ''
      const _x = 1270
      const _y = 500
      if (dot.x + 10 > _x && dot.y < _y) {
        posr = 'popup-lb'
        position.left = (dot.x - 10) + 'px'
      } else if (dot.x + 10 > _x) {
        posr = 'popup-l'
        position.left = (dot.x - 10) + 'px'
      } else if (dot.y < _y) {
        posr = 'popup-b'
      }
      return { position, posr }
    },
    addMakers (indexId) {
      const that = this
      const AMap = window.AMap
      const contentMarker = (id, name) => {
        return '' +
          '<div class="custom-content-marker">' +
          ' <div class="ico"><img src="' +
          that.mapData.list[id].icon +
          '" alt=""></div>' +
          '<div class="txt">' +
          name +
          '</div>' +
          '</div>'
      }

      const markerItem = (content, arr) => {
        const marker = new AMap.Marker({
          content,
          // icon,
          // icon: `${that.publicPath}images/map-ico${iconid}.png`,
          position: [arr.lat, arr.lng],
          offset: new AMap.Pixel(-50, -70)
        })

        if (arr.showdialog === 1) {
          that.hidePopup = false
        }
        marker.on('click', async function () {
          const { posr, position } = that.getPopupPosition(arr.lat, arr.lng)

          const popupConfig = {
            brief: arr.brief,
            pic: arr.pic,
            error: arr.error,
            jumpId: arr.jumpId,
            jump: arr.jump,
            show: true,
            position,
            posr
          }

          await that.$store.dispatch('sendPopup', {
            from: 'pad',
            id: that.$route.query.id,
            jumpId: arr.jumpId,
            jump: arr.jump,
            dia: 1,
            position
          })
          that.$emit('showPopup', popupConfig)
        })
        return marker
      }

      let datas = []
      let markers = []
      let indexNum
      if (indexId === undefined) {
        indexNum = -1
      } else {
        indexNum = indexId
      }
      // console.log('that.currentId', that.currentId, indexId)
      if (indexNum !== -1) {
        // console.log('indexNum', indexNum)
        datas = that.mapData.list[indexNum].markers
        // console.log('datas', datas)
        markers = datas.map(arr => {
          const content = contentMarker(indexNum, arr.name)
          const marker = markerItem(content, arr)
          return marker
        })
      } else {
        that.mapData.list.map((arr, index) => {
          if (arr.markers.length > 0) {
            markers = markers.concat(arr.markers.map(i => {
              const content = contentMarker(index, i.name)
              const marker = markerItem(content, i)
              const deviceType = that.$route.query.deviceType
              if (deviceType === 'tv') {
                if (i.showdialog === 1) {
                  // console.log('tvtv')
                  const { posr, position } = that.getPopupPosition(i.lat, i.lng)
                  const popupConfig = {
                    brief: arr.brief,
                    pic: arr.pic,
                    error: arr.error,
                    jumpId: arr.jumpId,
                    jump: arr.jump,
                    show: true,
                    position,
                    posr
                  }
                  // console.log('show++++++++++++++++++++')
                  that.$emit('showPopup', popupConfig)
                  // console.log('res:', res)
                }
              }
              return marker
            }))
          }
        })
      }
      // // console.log('datas', datas)
      //
      // // const content = contentMarker(0)
      //
      // console.log(markers)
      if (markers.length === 0) {
        that.$toast('抱歉，暂无此类别地标！')
      }
      that.markers = markers
      that.map.add(markers)
      // console.log('134')
      // if (that.hidePopup) {
      //   that.$emit('hidePopup')
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
  .mapsq {
    width: 100%;
    height: 100%;
    /*opacity: .0;*/
    /*transition: opacity 0.5s;*/
  }
</style>
